@use '../variables';

$block: '.#{variables.$ns}modal';
$modal-default-border-radius: 5px;
$modal-transition-duration: 150ms;
$modal-height-transition: height 350ms ease-in-out;
$modal-opacity-transition: opacity $modal-transition-duration ease-out;
$modal-transform-transition: transform $modal-transition-duration ease-out;

#{$block} {
    position: fixed;
    inset: 0;
    z-index: 1000;
    outline: none;

    background-color: var(--g-color-sfx-veil);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    &__content-aligner {
        min-width: 100%;
        min-height: 100%;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    &__content-wrapper {
        margin: var(--g-modal-margin, #{variables.$modal-default-margin});
    }

    &__content {
        height: var(--g-modal-height, auto);
        width: var(--g-modal-width, auto);

        background-color: var(--g-color-base-modal);
        border-radius: var(--g-modal-border-radius, #{$modal-default-border-radius});
        clip-path: inset(0 round var(--g-modal-border-radius, #{$modal-default-border-radius}));
        outline: none;

        transition: $modal-height-transition;

        &_has-scroll {
            overflow: auto;
            max-width: calc(
                100vw - calc(var(--g-modal-margin, #{variables.$modal-default-margin}) * 2)
            );
            max-height: calc(
                100vh - calc(var(--g-modal-margin, #{variables.$modal-default-margin}) * 2)
            );
        }
    }

    &[data-floating-ui-status='unmounted'] {
        display: none;
        visibility: hidden;
        margin: -9999px 0 0 -9999px;
    }

    &[data-floating-ui-status='open'],
    &[data-floating-ui-status='close'] {
        transition: $modal-opacity-transition;
    }

    &[data-floating-ui-status='initial'],
    &[data-floating-ui-status='close'] {
        opacity: 0;
    }

    &[data-floating-ui-status='initial'] #{$block}__content {
        transform: scale(0.75);
    }
    &[data-floating-ui-status='open'] #{$block}__content,
    &[data-floating-ui-status='close'] #{$block}__content {
        transition: $modal-height-transition, $modal-transform-transition;
    }

    @media (prefers-reduced-motion: reduce) {
        &[data-floating-ui-status] #{$block}__content {
            transition: none;
        }
    }
}
